<template>
	<view>
		<view class="category-menu">
			<scroll-view scroll-x="true" class="category-scroll">
				<view
					class="category-item"
					v-for="(item, index) in categorys"
					:key="index"
					:class="['category-item', selectedCategoryId === index ? 'active' : '']"
					@click="changeCategory(index)"
				>
					<view class="">{{ item }}</view>
				</view>
			</scroll-view>
		</view>

		<scroll-view scroll-y="true" class="scroll-container"  >
			<view v-for="(group, groupIndex) in groupMembers(members)" :key="groupIndex" class="table-row" v-if="selectedCategoryId === 0">
				<view v-for="(member, memberIndex) in group" :key="`${groupIndex}-${memberIndex}`">
					<view class="table-cell">
						<view class="avatar" @click="getuserinfo(member.userId)">
							<image class="pic" :src="member.nicPic || '/static/none.png'" mode="aspectFill"></image>
						</view>
						<view class="text">
							<text>{{ member.nicName || member.userId }}</text>
						</view>
					</view>
				</view>
				<!-- 补齐最后一行空位 -->
				<view v-if="group.length < 4" v-for="i in 4 - group.length" :key="`empty-${groupIndex}-${i}`" class="table-cell empty"></view>
			</view>
			<view class="shop-container" >
				<view v-for="(item, index) in showList" :key="item.id" v-if="selectedCategoryId !== 0" class="shop-item-wrapper">
					<view class="shopclass" >
						<view class="shop-item">
							<!-- 图片容器（新增外层，用于定位） -->
							<view class="image-container">
								<image class="shop-image" :src="item.photos && item.photos.length > 0 ? item.photos[0].url : '/static/none.png'" mode="aspectFill" />
								<!-- 将 name_type 移到图片容器内，绝对定位覆盖图片 -->
								<view class="name_type">
									<text class="shop-name">{{ item.title }}</text>
									<text class="shop-type">类型：{{ item.category }}</text>
								</view>
							</view>
							<!-- 原 shop-info 内容（移除 name_type） -->
							<view class="shop-info">
								<text class="shop-address" v-if="item.address">地址：{{ item.address }}</text>
								<text class="shop-time" v-if="item.business">营业时间：{{ item.business.opentime_today }}</text>
								<text class="shop-distance">离您：{{ Math.floor(item.distance) }}米</text>
								<text class="shop-tel" v-if="item.business">电话：{{ item.business.tel }}</text>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
		</scroll-view>
	
		<markerInfo v-if="markerInfoShow" :userId="userId" :markerInfoShow="markerInfoShow" @close="markerInfoShow = false"></markerInfo>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
import markerInfo from '../../components/markerInfo.vue';
export default {
	components: {
		markerInfo
	},
	data() {
		return {
			members: [],
			shopData: [],
			userInfo: {},
			markerInfoShow: false,
			categorys: [],
			selectedCategoryId: 0,
			userId: ''
		};
	},
	computed: {
		showList() {
			return this.shopData.filter((item) => {
				if (item.category !== this.categorys[0]) {
					return item.category === this.categorys[this.selectedCategoryId];
				}
			});
		}
	},
	watch: {
		showList: {
			handler(newval) {
				console.log('000000', newval);
			}
		}
	},
	async onLoad(res) {
		try {
			const recvdata = decodeURIComponent(res.members);
		    const result = JSON.parse(recvdata);
			console.log(result);
		
			this.categorys = this.getGategorys(result);
		    this.members=result
			const shopIds = result.filter((item) => item.keytag !== '普通用户').map((item) => item.id);
		
			await this.getShops(shopIds);
		} catch (error) {
			console.error('解析成员信息失败:', error);
			this.members = [];
		}
	},
	methods: {
		getGategorys(data) {
			const keytagSet = new Set();
			data.forEach((item) => {
				if(item.keytag!=='收藏点'){
					keytagSet.add(item.keytag);
				}
				
			});
			return Array.from(keytagSet);
		},
		async getShops(ids) {
			try {
				const res = await db
					.collection('sendshop')
					.where({
						sendshopId: db.command.in(ids)
					})
					.get();
				if (res.data.length > 0) {
					this.shopData = res.data;
				}
			} catch (e) {
				console.error(e);
			}
		},
		changeCategory(id) {
			this.selectedCategoryId = id;
		},
		groupMembers(members) {
			const grouped = [];
			for (let i = 0; i < members.length; i += 4) {
				grouped.push(members.slice(i, i + 4));
			}
			return grouped;
		},
		async getuserinfo(userId) {
			console.log('+++', userId);
			this.userId = userId;
			this.markerInfoShow = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.scroll-container {
	position: fixed;
	left: 0;
	top:85rpx;
	height: 100vh;
	width: 750rpx;
	background-color: #f5f5f5;
	margin-left: 20rpx;
	margin-right: auto;
}
.category-scroll {
	position: fixed;
	left: 0;
	top:0;
	white-space: nowrap;
	padding: 20rpx 20rpx;
	background: #fff;

	.category-item {
		display: inline-block;
		padding: 10rpx 30rpx;
		margin-right: 40rpx;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #666;
		background: #f5f5f5;

		&.active {
			background: #e64340;
			color: #fff;
			font-weight: bold;
		}
	}
}
.table-row {
	display: flex;
	width: 720rpx;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
}
.shop-container {
	display: flex;

	flex-wrap: wrap;

	justify-content: space-between;
}

.shop-item-wrapper {
	width: 50%;
}
.no-data{
	display: flex;
	flex-direction: column;
	height: 90%;
	width: 720rpx;
	justify-content: center;
	align-items: center;
	font-size: 50rpx;
	color: #666;
}
.table-cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 180rpx;
	height: 160rpx;
	border-radius: 10rpx;
}

.empty {
	visibility: hidden;
}
.pic {
	width: 100rpx;
	border-radius: 15rpx;
	height: 100rpx;
}
.avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 15rpx;
}
.text {
	font-size: 28rpx;
	width: 100rpx;
	height: 26rpx;
	overflow: hidden;
}

.image-container {
	background-color: antiquewhite;
	position: relative; /* 关键：为子元素提供定位基准 */
	width: 320rpx;
	height: 350rpx;
	margin-top: 25rpx;
	border-top-right-radius: 16rpx;
	border-top-left-radius: 16rpx;
}

.shop-image {
	width: 100%;
	height: 100%;
	border-radius: inherit; /* 继承容器的圆角 */
}

/* 调整 name_type 的定位 */
.name_type {
	position: absolute;
	left: 5rpx;
	right: 5rpx;
	bottom: 5rpx;
	background-color: rgba(0, 0, 0, 0.3);
	color: white;
	padding: 8rpx; /* 添加内边距提升可读性 */
	display: flex;
	flex-direction: column;
}

/* 微调文字样式（可选） */
.shop-name {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 4rpx;
}
.shop-type {
	font-size: 26rpx;
	opacity: 0.9;
}
.shop-info {
	display: flex;
	flex-direction: column;
	width: 318rpx;
	margin-top: 10rpx;
	border-width: 1rpx;
	border-color: blue;
	padding: 5rpx;
	font-size: 28rpx;
	border-bottom-left-radius: 16rpx;
	border-bottom-right-radius: 16rpx;
	box-shadow: 0 5rpx 1rpx rgba(0, 0, 0, 0.2);
	word-break: break-all; /* 设置文本自动换行 */
}
</style>

